<template>
  <div @click="bodyClick($event)" class="createItem">

    <div class="createItem_con"
    :style="{'height':(winHei-65)+'px'}">

        <div class="createItem_main"
        :style="{'height':(winHei-65-50)+'px'}">

          <div class="createItem_main_top">

            <div @click.stop="" class="selDateBox">

                <div class="selDateBoxMain">
                  <input :class="{'inpFocus':cur_inp==0}" v-model="inp_00" @focus="op_cl(0,true,true)" type="text" placeholder="开始日期">
                  <img class="trans" src="@/assets/img/date/trans.png" alt="">
                  <input :class="{'inpFocus':cur_inp==1}" v-model="inp_01" @focus="op_cl(1,true,true)" type="text" placeholder="结束日期">
                  <img class="date" src="@/assets/img/date/date_ico.png" alt="">
                </div>

                <Calendar ref="riLi"></Calendar>

            </div>

            <div class="beizhu">
              *默认显示当天的数据
            </div>

            <div @click="item_tatistics" class="cxBtn">
              查询
            </div>

          </div>


          <div class="createItem_main_bot">
            <dl>
              <dt>打单笔数</dt>
              <dd>
                {{itemNum}} 笔
              </dd>
            </dl>
          </div>

        </div>

    </div>
  </div>
</template>

<script>
import Calendar from "@/components/calendar.vue"
export default {
  name: 'CreateItem',
  data(){
    return{
      inp_00:"",
      inp_01:"",
      cur_inp:null,
      itemNum:0
    }
  },
  components: {
    Calendar
  },
  activated() {
    let that=this;
    that.inp_00=that.init_date(Number(new Date())-1000*60*60*24);
    that.inp_01=that.init_date(Number(new Date()));
    that.item_tatistics();
  },
  methods:{
    init_date(val){
      let that=this;
      let year,month,day,cur_time,hour,mins;
      console.log("val_123:"+new Date(val));
      cur_time=new Date(val);
      year=cur_time.getFullYear();
      month=(cur_time.getMonth()+1)>9?(cur_time.getMonth()+1):("0"+(cur_time.getMonth()+1));
      day=cur_time.getDate();
      hour=cur_time.getHours()>9?cur_time.getHours():("0"+cur_time.getHours());
      mins=cur_time.getMinutes()>9?cur_time.getMinutes():("0"+cur_time.getMinutes());
      console.log('year:'+year+'month:'+month+'day:'+day);
      return year+'-'+month+'-'+day+" "+hour+":"+mins;
    },
    item_tatistics(){
      let that=this;
      this.$request.post(
           `/api/order/order_census_log`,
           {
            start_time:that.inp_00+":00",
            end_time:that.inp_01+":00"
           },
           {

           }
        ).then((res)=>{
            console.log("打单记录请求成功：",res);

            if(res.data.code==1){
              that.itemNum=res.data.data.count
            }
        })
        .catch((err)=>{
          console.log("打单记录请求失败：",err);
        });
    },
    bodyClick(e){
      let that=this;
      this.$refs.riLi.operateFn(that.cur_inp,false,false);
    },
    op_cl(x,y,z){
      let that=this;
      console.log("this.$refs.riLi:",this.$refs.riLi);
      this.cur_inp=x;
      this.$refs.riLi.operateFn(x,y,z);
    },
    getDate(x,y){
      let that=this;
      console.log("getDate_x:",x,"getDate_y:",y);

      let timeStr=y.Y+"-"+(y.M<10?("0"+y.M):y.M)+"-"+(y.D<10?("0"+y.D):y.D)+" "+(y.H<10?("0"+y.H):y.H)+":"+(y.Min<10?("0"+y.Min):y.Min);
console.log("timeStr:",timeStr);
      if(x==0){
        console.log("输入框1");
        that.inp_00=timeStr;
      }else{
        console.log("输入框2");
        that.inp_01=timeStr;
      }

    }
  }
}
</script>
<style lang="less" scoped>
  .createItem{
    width: 100%;
    .createItem_con{
      .createItem_main{
        padding: 25px;
        overflow-y: auto;
        .createItem_main_top{
          display: flex;
          flex-direction: row;
          .selDateBox{
            border: 1px solid #d9d9d9;
            background-color: #fff;
            position: relative;
            .selDateBoxMain{
              position: relative;
              display: flex;
              flex-direction: row;
              align-items: center;
              padding: 0 10px;
              input{
                display: block;
                border: none;
                outline: none;
                height: 33px;
                line-height: 33px;
                font-size: 13px;
                width: 130px;
                border-bottom: 1px solid transparent;
                transition: .3s;
              }

              input::placeholder{
                color: #bfbfbf;
                font-size: 13px;
                line-height: 33px;
              }



              .inpFocus{
                border-color: #f47920;
              }

              img{
                display: block;
              }
              .trans{
                width: 10px;
                height: 4px;
                margin-right: 15px;
              }
              .date{
                width: 12px;
                height: 12px;
              }
            }
          }

          .beizhu{
            margin-left: 15px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #545456;
          }

          .cxBtn{
            margin-left: 15px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            color: #fff;
            background-color: #f47920;
            padding: 0 15px;
            cursor: pointer;
            border-radius: 3px;
          }
        }

        .createItem_main_bot{
          background-color: #fff;
          padding: 15px;
          margin-top: 20px;
          dl{
            dt{
              color: #8c8c8c;
              font-size: 14px;
              line-height: 24px;
            }
            dd{
              color: #3f8600;
              font-size: 22px;
              line-height: 24px;
              padding: 10px 0 0;
              font-weight: bolder;
            }
          }
        }
      }
    }
  }
</style>
